<template>
    <div class="body">
        <div class="base clear">
            <div class="title">
                <p>基础信息</p>
                <span>单号：{{data.id}}</span>
            </div>
            <div class="base-sub">
                <span>客户名称：</span>
                <span>{{data.aname}}</span>
            </div>
            <div class="base-sub">
                <span>收款方式：</span>
                <span>{{data.payType}}</span>
            </div>
            <div class="base-sub">
                <span>业务员：</span>
                <span>{{data.oname}}</span>
            </div>
            <div class="base-sub">
                <span>跟车配送员:</span>
                <span>无</span>
            </div>
            <div class="base-sub">
                <span>出货仓库：</span>
                <span>{{data.depot}}</span>
            </div>
            <div class="base-sub">
                <span>创建日期：</span>
                <span>{{data.createDate}}</span>
            </div>  
        </div>

        <div class="approve">
            <div class="title">
                <span>审批状态：</span>
                <span>{{data.state}}</span>
            </div>
            <div class="sugg">
                <span>审批意见：</span>
                <span>{{data.comments}}</span>
            </div>
        </div>

        <div class="data">
             <div class="title"><p>商品明细</p></div>
             <GoodsList/>
             <div class="sum">
                 <p>商品共：{{datalist.length}}</p>
                 <p>金额合计：{{count}}元</p>
             </div>
        </div>

        <div class="paydetails">
            <div class="title"><p>付款信息</p></div>
            <div class="item">
                <span>付款类型：</span>
                <span>{{data.payType}}</span>
            </div>
            <div class="item">
                <span>优惠金额：</span>
                <span>无</span>
            </div>
            <div class="item money">
                <span>应付款金额：</span>
                <span>{{count}}</span>
            </div>
        </div>
    </div>
</template>


<script>
import GoodsList from '../../components/Inventory/ViewgoodsList.vue'
import {getDataApi} from '../../http/InventoryApi/OutApi'
export default {
    name:'ViewDetails',
    components:{
        GoodsList
    },
    data() {
        return {
            data:[],
            datalist:[]
        }
    },
    computed: {
        count() {
            var all = 0
            for(let i=0;i<this.datalist.length;i++) {
                all += this.datalist[i].money
            }
            return all
        }
    },
    activated() {
        this.render()
    },
    methods:{
        render() {
            let id = this.$route.query.id
            this.data.id = this.$route.query.id
            this.data.aname = this.$route.query.aname
            this.data.payType = this.$route.query.payType 
            this.data.oname = this.$route.query.oname
            this.data.depot = this.$route.query.depot
            this.data.createDate = this.$route.query.createDate
            this.data.state = this.$route.query.state
            this.data.comments = this.$route.query.comments   

            console.log('id',id)
            getDataApi(id)
             .then(res => {
                this.datalist = res.data.data
                console.log(res,'777')
             })    
        }
    }
}
</script>



<style lang="scss" scoped>
@import "../../assets/sass/var.scss";
.body {
    .base {
        width:90%;
        margin:0 5% 20px;
        height: 200px;
        border:solid 1px rgb(225, 225, 225);
        .title {
            height: 50px;
            background: $background-color;
            p {
                font-size: 12px;
                line-height: 50px;
                margin-left:10px;
                float: left;
            }
            span {
                line-height: 50px;
                font-size: 12px;
                float: right;
                margin-right: 10px;
            }

        }
        .base-sub {
            float: left;
            height: 50px;
            line-height: 50px;
            margin:20px 20px;
            font-size: 12px;
        }
    }
    .approve {
        width:90%;
        margin:0 5% 20px;
        height: 150px;
        border:solid 1px rgb(225, 225, 225);
        .title {
            height: 50px;
            background: $background-color;
            span {
                font-size: 12px;
                line-height: 50px;
                margin-left:10px;
            }
        }
        .sugg {
            margin: 10px 10px 0;
            font-size: 14px;
        }
    }
    .data {
        width:90%;
        margin:20px 5% 0;
        border:solid 1px rgb(225, 225, 225);
        .title {
            height:50px;
            background: $background-color;
            p {
                line-height: 50px;
                font-size: 12px;
                margin-left: 10px;
            }
        }
        .sum {
            margin-left: 20px;
            height: 50px;
            p {
                font-size: 20px;
                margin-right: 20px;
                float: left;
                line-height: 50px;
            }
        }
    }
    .paydetails {
        width: 90%;
        margin:0px 5% 20px;
        border:solid 1px rgb(225, 225, 225);
        .title {
            height:50px;
            background: $background-color;
            p {
                line-height: 50px;
                font-size: 12px;
                margin-left: 10px;
            }
        }
        .item {
            margin:20px;
            font-size: 12px;
            
        }
        .money {
                font-size:16px
            }
    }
}
</style>